<!-- 待约面-约面 -->
<template>
  <div class="btns">
    <Button v-auth="'accomplishTripartiteSign'" color="primary" @click="finishSign">完成三方</Button>
    <Button v-auth="'waitTripartiteSignWaive'" color="warning" @click="surrender">放弃</Button>
  </div>
  <BasicModal :show="show" title="上传三方协议照片" width="30%" :widthComfirm="true" @comfirm="comfirm"
    @closeModal="show = false">
    <template #content>
      <a-upload v-model:file-list="fileList" list-type="picture-card" action="#" accept=".png,.jpg" multiple
        :before-upload="beforeUpload" @preview="handlePreview">
        <div v-if="fileList.length < 4" class="uploader">
          <i class="iconfont icon-shangchuan"></i>
          <div style="margin-top: 8px">上传图片</div>
        </div>
      </a-upload>
    </template>
  </BasicModal>
  <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
    <img alt="example" style="width: 100%" :src="previewImage" />
  </a-modal>
</template>

<script setup lang='ts'>
import { Button } from "@/components/Button";
import BasicModal from "@/views/ApplicationDetails/Modals/BasicModal.vue";
import type { UploadProps } from 'ant-design-vue';
import { ref } from "vue"
import { message } from "ant-design-vue";
import { contractSigned, uploadContractFile } from "@/api/application-details/index.ts";
import { comStores } from '@/store/common/comStore';
const store = comStores()
const { userName } = store.userInFor


const emits = defineEmits(['surrender']);
const show = ref<boolean>(false);
const fileList = ref<UploadProps['fileList']>([]);
const previewVisible = ref<boolean>(false);
const previewImage = ref<string>('');
const previewTitle = ref<string>('');
const surrender = () => {
  console.log('surrender')
  emits('surrender', '待签三方')
}

const finishSign = () => {
  show.value = true
  console.log('待签三方', 'finishSign')
}
const beforeUpload = (fileList) => {
  return false;
}
const handleCancel = () => {
  previewVisible.value = false;
  previewTitle.value = '';
};

const handlePreview = async (file: UploadProps['fileList'][number]) => {
  if (!file.url && !file.preview) {
    file.preview = (await getBase64(file.originFileObj)) as string;
  }
  previewImage.value = file.url || file.preview;
  previewVisible.value = true;
  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};

function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

const comfirm = async () => {
  console.log(fileList.value);
  const formdata = new FormData()
  const { resumeId, processId } = store.currentResume;
  if (fileList?.value.length > 0) {
    fileList.value?.forEach((el, idx) => {
      const file = el.originFileObj as File;
      formdata.append('files', file);
    })
    formdata.append('resumeId', resumeId)
    const res = await uploadContractFile(formdata);
    if (res && res.code === '10000') {
      message.success('上传协议照片成功');
    } else {
      message.error(res.msg);
      return
    }
  }
  let param = {
    resumeId: resumeId,
    processId: processId,
    result: "通过",
    operator: userName,
  }
  const data = await contractSigned(param)
  if (data && data.code === '10000') {
    message.success("操作成功");
    show.value = false
    await store.getResumeInfo(resumeId)
  } else {
    message.error(data.msg)
  }
}
</script>
<style lang="less" scoped>
.btns {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.uploader {
  color: #209ee4;
  font-weight: 400;
  font-size: 14px;
}

:deep(.ant-upload-select-picture-card) {
  border: 1px dashed rgba(32, 158, 228, 0.7) !important;
}

:deep(.ant-upload-list-item::before) {
  width: 100% !important;
  height: 100% !important;
}

:deep(.ant-upload-list-item) {
  padding: 0 !important;
  position: relative;
}

:deep(.anticon-delete) {
  width: 20px !important;
  height: 20px;
  background-color: #E85B5B;
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -30px;
  right: -20px;
  color: #E85B5B;

  svg {
    font-size: 12px;
  }
}

:deep(.anticon-eye) {
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px
  }
}
</style>
